<script setup>
import { Document, Menu, Location, Setting } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import { useUserStore } from './store/userStore.js'

const route = useRoute()
const userStore = useUserStore()

userStore.setUserInfo({
    id: '123456',
    username: 'hcxowe',
    role: '系统管理员'
})
</script>

<template>
    <div class="main-wrapper">
        <el-container>
            <el-header height="40px">
                <div class="flex align-items-center padding-h-16">vite</div>
            </el-header>
            <el-main>
                <el-container>
                    <el-aside width="250px">
                        <el-scrollbar>
                            <el-menu router :default-active="route.path">
                                <el-menu-item index="/home">
                                    <el-icon><Document /></el-icon>
                                    <span>Home</span>
                                </el-menu-item>
                                <el-sub-menu index="/component">
                                    <template #title>
                                        <el-icon><Menu /></el-icon>
                                        <span>Component</span>
                                    </template>
                                    <el-menu-item index="/component/component">component</el-menu-item>
                                    <el-menu-item index="/component/progress">progress</el-menu-item>
                                    <!-- <el-menu-item index="/css/gradient">gradient</el-menu-item>
                                    <el-menu-item index="/css/border">border</el-menu-item> -->
                                </el-sub-menu>
                                <el-menu-item index="/translation">
                                    <el-icon><Location /></el-icon>
                                    <span>Traslation</span>
                                </el-menu-item>
                                <el-menu-item index="/reactive">
                                    <el-icon><Setting /></el-icon>
                                    <span>Reactive</span>
                                </el-menu-item>
                                <el-sub-menu index="/html">
                                    <template #title>
                                        <el-icon><Location /></el-icon>
                                        <span>HTML</span>
                                    </template>
                                    <el-menu-item index="/html/form">Form</el-menu-item>
                                    <el-menu-item index="/html/list">List</el-menu-item>
                                    <el-menu-item index="/html/drag">Drag&Drop</el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="/css">
                                    <template #title>
                                        <el-icon><Location /></el-icon>
                                        <span>CSS</span>
                                    </template>
                                    <el-menu-item index="/css/clip-path">clip-path</el-menu-item>
                                    <el-menu-item index="/css/fit-content">fit-content</el-menu-item>
                                    <el-menu-item index="/css/gradient">gradient</el-menu-item>
                                    <el-menu-item index="/css/border">border</el-menu-item>
                                    <el-menu-item index="/css/mix-blend-mode">mix-blend-mode</el-menu-item>
                                    <el-menu-item index="/css/background-blend-mode">background-blend-mode</el-menu-item>
                                    <el-menu-item index="/css/cross-fade">cross-fade</el-menu-item>
                                    <el-menu-item index="/css/mask">mask</el-menu-item>
                                    <el-menu-item index="/css/cssvariable">CSS-Variable</el-menu-item>
                                    <el-menu-item index="/css/animation">Animation</el-menu-item>
                                    <el-menu-item index="/css/auto-color">颜色自适应</el-menu-item>
                                    <el-menu-item index="/css/stacking">层叠</el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="/js">
                                    <template #title>
                                        <el-icon><Location /></el-icon>
                                        <span>ES</span>
                                    </template>
                                    <el-menu-item index="/js/selection">selection</el-menu-item>
                                    <el-menu-item index="/js/stringtodom">strToDOM</el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="/leafer">
                                    <template #title>
                                        <el-icon><Location /></el-icon>
                                        <span>Leafer</span>
                                    </template>
                                    <el-menu-item index="/leafer/line">Line</el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="/flex">
                                    <template #title>
                                        <el-icon><Location /></el-icon>
                                        <span>Flex</span>
                                    </template>
                                    <el-menu-item index="/flex/autosize">AutoSize</el-menu-item>
                                    <el-menu-item index="/flex/flex">flex</el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="/grid">
                                    <template #title>
                                        <el-icon><Location /></el-icon>
                                        <span>Grid</span>
                                    </template>
                                    <el-menu-item index="/grid/base">Base</el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="/columns">
                                    <template #title>
                                        <el-icon><Location /></el-icon>
                                        <span>Columns</span>
                                    </template>
                                    <el-menu-item index="/columns/base">Base</el-menu-item>
                                    <el-menu-item index="/columns/book">Book</el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="/svg">
                                    <template #title>
                                        <el-icon><Location /></el-icon>
                                        <span>SVG</span>
                                    </template>
                                    <el-menu-item index="/svg/path">path</el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="/canvas">
                                    <template #title>
                                        <el-icon><Location /></el-icon>
                                        <span>Canvas</span>
                                    </template>
                                    <el-menu-item index="/canvas/template">API</el-menu-item>
                                    <el-menu-item index="/canvas/arrow">Arrow</el-menu-item>
                                    <el-menu-item index="/canvas/autowrap">TextAutoWrap</el-menu-item>
                                </el-sub-menu>
                            </el-menu>
                        </el-scrollbar>
                    </el-aside>
                    <el-main>
                        <RouterView />
                    </el-main>
                </el-container>
            </el-main>
            <el-footer height="30px">
                <div class="flex align-items-center padding-h-16">footer</div>
            </el-footer>
        </el-container>
    </div>
</template>

<style>
#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.main-wrapper {
    width: 100%;
    height: 100%;
}
</style>

<style scoped>
.el-header {
    padding: 0 15px;
    background-color: #b3c0d1;
    color: #333;
    line-height: 40px;
}

.el-aside {
    border-right: 1px solid #d3dce6;
}

.el-footer {
    padding: 0 15px;
    background-color: #b3c0d1;
    color: #333;
    line-height: 30px;
}
</style>